<template>
  <div ref="vantaRef" style="width: 100%; height: 200vh; postion: absolute; top:-50px;">
    <div class="continer">
          <div class="content">
            <p>江苏省淮安市瀚唐OA办公自动化系统</p>
            <p>高效办公  安全协同</p>
            <p>携带在身上的办公平台，可实时查阅待审<br>批流程或文件，审批信息实时反馈至PC端<br>用户。</p>
          </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="login-ruleForm"
    >
      <el-form-item prop="empCode">
        <span class="title"><i class="el-icon-s-custom"></i>用户账号</span>
        <el-input
          class="input"
          v-model="ruleForm.empCode"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="empPassword">
        <span class="title"><i class="el-icon-key"></i>用户密码</span>
        <el-input
          class="input"
          v-model="ruleForm.empPassword"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <router-link to="/myRegister"
          ><p class="registerText">立即注册 ?</p></router-link>
      </el-form-item>

      <el-form-item>
        <p class="submitLogin">
          <el-button class="submitBtn" @click="submitForm('ruleForm')"
            >Login</el-button
          >
        </p>
      </el-form-item>
      <el-form-item>
        <p class="resetLogin">
          <el-button class="resetBtn" @click="resetForm('ruleForm')"
            >Reset</el-button
          >
        </p>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "../api/user";
import * as THREE from "three";
import CLOUDS from "vanta/src/vanta.clouds";

export default {
  name: "MyLogin",
  data() {
    return {
      ruleForm: {
        empCode: "",
        empPassword: "",
      },
      rules: {
        empCode: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "长度在 2 到 16 个字符",
            trigger: "blur",
          },
        ],
        empPassword: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(empCode) {
      this.$refs[empCode].validate((valid) => {
        if (valid) {
          login(this.ruleForm.empCode, this.ruleForm.empPassword).then(
            (res) => {
              // console.log(res.data.data);
              if (res.data.code === "002") {
                localStorage.setItem("token", res.data.data);
                this.$store.commit("setEmp",res.data.data)
                this.$router.replace({ path: "/homePage" });
              } else {
                this.$message(res.msg);
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(empCode) {
      this.$refs[empCode].resetFields();
    },
  },
  mounted() {
    this.vantaEffect = CLOUDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style scoped>
.continer{
    position: absolute;
    top: 260px;
    left: 30%;
    width: 750px;
    height: 350px;
    /* background-color: rgba(148, 148, 148, 0.1); */
    background:repeating-linear-gradient(to right,rgba(170, 170, 170,0.8),rgba(255, 255, 255,0.2));
    /* border: 2px solid black; */
    border-radius: 20px;
}
.content p:nth-child(1){
    color: rgb(112, 112, 112);
    font-family: '黑体';
    font-size: 22px;
    font-weight: bold;
    position: relative;
    top: 30px;
    left: 15px;
    opacity: 0.8;
}
.content p:nth-child(2){
    color: rgb(188, 194, 196);
    font-family: '黑体';
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 25px;
    left: 15px;
}
.content p:nth-child(3){
    color: white;
    font-family: '黑体';
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 25px;
    left: 15px;
}

.login-ruleForm{
  position: absolute;
  top: 50px;
  right: 10px;
  width: 350px;
  height: 250px;
  border: 3px solid white;
  background-color: rgba(207, 207, 204,0.2);
  border-radius: 20px;
}
.title{
  position: relative;
  top: 25px;
  left: -60px;
  color: rgb(134, 131, 131);
  font-size: 16px;
}
i{
  width: 20px;
  height: 20px;
}
.registerText{
  color: white;
  font-size: 12px;
  position: relative;
  top: -10px;
  left: 150px;
}
.registerText:hover{
  color: rgb(248, 199, 125);
}

.input{
  width: 160px;
  position: relative;
  top: 25px;
  left: -30px;
  opacity: 0.5;
}
.input:hover{
  opacity: 1;
}
.submitLogin{
  display: inline-block;
  position: relative;
  top: -50px;
  left: -40px;
}
.resetLogin{
  display: inline-block;
  position: relative;
  top: -141px;
  left: 90px;
}
.submitBtn{
  width: 100px;
  height: 40px;
  color: black;
  font-size: 16px;
  opacity: 0.5;
}
.submitBtn:hover{
  color: white;
  opacity: 0.8;
  background-color: rgb(245, 201, 134);
}
.resetBtn{
  width: 100px;
  height: 40px;
  color: black;
  font-size: 16px;
  opacity: 0.5;
}
.resetBtn:hover{
  color: white;
  opacity: 0.8;
  background-color: rgb(247, 152, 145);
}
</style>>
